
<template>
  <mu-paper :z-depth="1" class="lan-loadmore-header">
  <mu-appbar color="primary">
    <mu-button icon slot="left">
      <i class="iconfont angle-left iconangle-left "></i>
    </mu-button>
    <!-- <mt-button class="lan-close-btn" slot="left">
      <i class="iconfont angle-left iconangle-left "></i>
    </mt-button> -->
    这是列表页
    <mu-button icon slot="right" @click="refresh()">
      <!-- <mu-icon value="more"></mu-icon> -->
      <i class="iconfont iconshaixuan4"></i>
    </mu-button>
  </mu-appbar>
  <mu-container ref="container" class="lan-loadmore-content">
    <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
      <mu-list>
        <template v-for="i in num">
          <!-- 这里是业务结构 -->
          <mu-list-item>
            <mu-list-item-title>{{text}} Item {{i}}</mu-list-item-title>
          </mu-list-item>
          <mu-divider />
        </template>
      </mu-list>
    </mu-load-more>
  </mu-container>
</mu-paper>
</template>

<script>
export default {
  name: 'MapShow',
  data () {
      return {
        num: 15,
        refreshing: false,
        loading: false,
        text: 'List'
      }
  },
  props: {
     
      pointCb:{
        type:Function,
        default:()=>{}
      },
    },
    created(){
      
    },
    methods:{
      loadTop(){
        // alert('顶部事件')
        setTimeout(() => {
          this.list = [1,2,3,4,5,7,8,9,10,11,12,13,14,15]
          this.$refs.loadmore.onTopLoaded();
        },2000)
      },
      loadBottom(){
        // alert('底部事件')
        // this.list.push(...[1,2,3,4,5])
        // setTimeout(() => {
          
          // this.list.push(...[1,2,3,4,5])
          // this.$refs.loadmore.onBottomLoaded();
          // this.allLoaded = true
        // },2000)
        // this.allLoaded = true;// 若数据已全部获取完毕
        
      },
      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.text = this.text === 'List' ? 'Menu' : 'List';
          this.num = 10;
        }, 2000)
      },
      load () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.num += 10;
        }, 2000)
      }
      
  }
}
</script>

<style lang="scss" scoped>
 
</style>
<style lang="scss">
.lan-close-btn{
  background-color:transparent;
  color:#fff !important;
  box-shadow: none !important;
  font-weight: bold;
}
.lan-loadmore-header{
   width: 100%;
  // max-width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  >.mu-appbar{
    height:50px !important;
    width: 100%;
  }
  .mu-appbar-title{
    text-align: center;
    font-size:16px !important;
    line-height:50px !important;
  }
}
.lan-loadmore-content{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  .mu-appbar {
    width: 100%;
  }
  padding-left:10px;
  padding-right:10px;
}
</style>
